<template lang="html">
  <section class="components-video-modal" style="z-index: 990">
    <i class="ic-close" @click="routerBack"></i>
    <i class="icon-warning"></i>
    <p class="content">
      本视频为付费视频，价格为<em>￥{{price}}</em>。请直接使用微信支付购买该视频播放权限。
    </p>
    <button type="button" class="confirmBtn" @click="$emit('confirm')">微信支付</button>
  </section>
</template>

<script>
export default {
  props: {
    price: {
      type: Number
    }
  },
  methods: {
    routerBack(){
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../css/config";
.components-video-modal{
  position: fixed;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 507px;
  box-sizing: border-box;
  padding: 33px 65px;
  border-radius: 30px;
  background-color: #fff;
  .ic-close{
    position: absolute;
    top: 20px;
    right: 20px;
    display: block;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 100%;
    font-size: 22px;
    color: #fff;
    background-color: $common-red;
    &:active{
      color: $active-font;
      background-color: $active-bg;
    }
  }
  .icon-warning{
    display: block;
    margin: 0 auto;
    width: 128px;
    height: 115px;
    background: url('../../assets/image/warning.png') no-repeat;
    background-size: cover;
  }
  .content{
    margin-top: 30px;
    font-size: 30px;
    line-height: 1.8;
    font-weight: lighter;
    em{
      color: $common-red;
    }
  }
  .confirmBtn{
    margin: 30px auto 0;
    display: block;
    width: 270px;
    height: 80px;
    color: #fff;
    font-weight: 100;
    font-size: 30px;
    background-color: $common-red;
    border-radius: 30px;
    &:active{
      color: $active-font;
      background-color: $active-bg;
    }
  }
}
</style>
